<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>Mobiscroll 2.5.2</title>

	<link href="css/mobiscroll.custom-2.5.2.css" rel="stylesheet" />
    <script src="script/jquery-1.9.1.js"></script>
    <script src="script/mobiscroll.custom-2.5.2.js"></script>

    <style type="text/css">
		*{ margin:0; padding:0;}
        body {
            margin: 0; padding: 0;
            font-family:"微软雅黑";
            font-size: 14px;
            background: #fff;}
        input, select {
            width: 100%;
            padding: 5px;
            margin: 5px 0 10px;
			background:#f5f5f5;
            border: 1px solid #ccc;
            box-sizing: border-box;
            border-radius: 3px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-border-radius: 3px;}
		label{ font:14px/1.4em "微软雅黑";}
        .header {
			box-sizing:border-box;
            border: 1px solid #333;
            background: #111; height:40px;
            color: white;
            font-weight: bold;
            text-shadow: 0 -1px 1px black;
            background-image: linear-gradient(#3C3C3C,#111);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
            background-image: -moz-linear-gradient(#3C3C3C,#111);}
        .header h1 {
            text-align: center;
            font-size: 16px;
            margin: .6em 0;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;}
		.header h1 a{ color:#fff; text-decoration:none;}
        .content { padding: 15px; box-sizing:border-box; }
		.copy{ height:40px; font:14px/40px "微软雅黑"; color:#aaa; text-align:center; background:#eee; border-top:1px solid #ddd; box-sizing:border-box;}
        .car { position: relative; height: 100%; min-width:150px; }
        .car .img-cont { width: 50px; height: 28px; text-align: center; float: left; position: relative; top: 50%; margin-top: -14px;}
        .car .img-cont img { display: block; height: 28px; margin: 0 auto; }
        .car span { float: left; }
    </style>

    <script>
        $(function () {
			$.mobiscroll.setDefaults({animate:"pop",lang:"zh",closeOnOverlay:true});
			
            var opt = {};

            opt.date = {preset : 'date'};
			opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.time = {preset : 'time'};
			opt.tree_list = {preset : 'list', labels: ['省份', '城市', '地区']};
			opt.image_text = {preset : 'list', labels: ['汽车']};
			opt.select = {preset : 'select'};
			<!--Script-->

            $('select.changes').bind('change', function() {
                var demo = $('#demo').val();
                $(".demos").hide();
                if (!($("#demo_"+demo).length))
                    demo = 'default';

                $("#demo_"+demo).show();
                $('#test_'+demo).val('').scroller('destroy').scroller($.extend(
					opt[$('#demo').val()], 
					{
						theme: $('#theme').val(),
						mode: $('#mode').val(),
						animate:$("#animate").val(),
						display:$('#display').val()
					}
				));
            });

            $('#demo').trigger('change');
			
			
			// debug this page
			$(".content").css({minHeight:$(window).height()-80});
        });
    </script>

</head>
<body>

    <div class="header">
        <h1><a href="javascript:location.reload(true);">Mobiscroll 2.5.2</a></h1>
    </div>

    <div class="content">

      <label for="theme">选择主题</label>
      <select name="theme" id="theme" class="changes">
          <option value="default">Default</option>
          <option value="android">Android</option>
          <option value="android-ics light">Android ICS Light</option>
          <option value="android-ics">Android ICS</option>
          <option value="ios">iOS</option>
          <option value="sense-ui">Sense UI</option>
          <option value="wp light">Windows Phone Light</option>
          <option value="wp">Windows Phone</option>
      </select>

      <label for="mode">选择模式</label>
      <select name="mode" id="mode" class="changes">
          <option value="scroller">Scroller</option>
          <option value="clickpick">Clickpick</option>
          <option value="mixed">Mixed</option>
      </select>

      <label for="display">显示方式</label>
      <select name="display" id="display" class="changes">
          <option value="modal">Modal</option>
          <option value="inline">Inline</option>
          <option value="bubble">Bubble</option>
          <option value="top">Top</option>
          <option value="bottom">Bottom</option>
      </select>

      <label for="animate">弹出特效</label>
      <select name="animate" id="animate" class="changes">
      	  <option value="">None</option>
          <option value="fade">fade</option>
          <option value="pop">pop</option>
          <option value="flip">flip</option>
          <option value="swing">swing</option>
          <option value="slidevertical">slidevertical</option>
          <option value="slidehorizontal">slidehorizontal</option>
      </select>

      <label for="demo">演示类型</label>
      <select name="demo" id="demo" class="changes">
          <option value="date">日期</option>
          <option value="time">时间</option>
          <option value="datetime">日期时间</option>
          <option value="select">普通选择</option>
          <option value="tree_list">联动选择</option>
          <option value="image_text">图文选择</option>
      </select>

      <br><br><br>
        
        <div id="demo_default" class="demos">
            <label for="test_default">查看效果：</label>
            <input type="text" name="test_default" id="test_default" />
        </div>

        <div data-role="fieldcontain" class="demos fieldcontain" id="demo_tree_list">
			<label for="test_tree_list_dummy">选择地区</label>
            <ul id="test_tree_list">
            <li>江苏省
              <ul>
              <li>徐州市
                <ul>
                <li>云龙区</li>
                <li>鼓楼区</li>
                <li>九里区</li>
                <li>泉山区</li>
                <li>贾汪区</li>
                <li>新沂市</li>
                <li>邳州市</li>
                <li>丰县</li>
	            <li>沛县</li>
    	        <li>铜山</li>
        	    <li>睢宁</li>
            	</ul>
	          </li>
              <li>南京市
                <ul>
      		    <li>玄武区</li>
            	<li>鼓楼区</li>
                <li>白下区</li>
                <li>建邺区</li>
                <li>秦淮区</li>
                </ul>
              </li>
              <li>苏州市
                <ul>
                <li>暂无介绍</li>
                </ul>
              </li>
              <li>无锡市
                <ul>
                <li>暂无介绍</li>
                </ul>
              </li>
              <li>常州市
                <ul>
                <li>暂无介绍</li>
                </ul>
              </li>
              </ul>
            </li>
            <li>北京市
              <ul>
              <li>无内容
                <ul>
                <li>无内容</li>
                </ul>
              </li>
              </ul>
            </li>
            <li>上海市
              <ul>
              <li>无内容
                <ul>
                <li>无内容</li>
                </ul>
              </li>
              </ul>
            </li>
          </ul>  
		</div>

		<div data-role="fieldcontain" class="demos fieldcontain" id="demo_image_text">
			<label for="test_image_text_dummy">选择汽车品牌</label>
            <ul id="test_image_text">
            <li>
              <div class="car">
              <div class="img-cont"><img src="image/BMW_logo.png"></div><span>宝马</span>
              </div>
            </li>
            <li>
              <div class="car">
              <div class="img-cont"><img src="image/Ferrari_logo.png"></div><span>法拉利</span>
              </div>
            </li>
            <li>
              <div class="car">
              <div class="img-cont"><img src="image/Mercedes_logo.png"></div><span>奔驰</span>
              </div>
            </li>
            <li>
              <div class="car">
              <div class="img-cont"><img src="image/Opel_logo.png"></div><span>欧宝</span>
              </div>
            </li>
            <li>
              <div class="car">
              <div class="img-cont"><img src="image/Volkswagen_logo.png"></div><span>大众</span>
              </div>
            </li>
            </ul>  
		</div>

		<div data-role="fieldcontain" class="demos fieldcontain" id="demo_select">
			<label for="test_select" class="ui-input-text">喜欢的电影</label>
            <select id="test_select" class="demos" data-role="none">
            <option value="0">请选择</option>
            <option value="1">《变形金刚》</option>
            <option value="2">《盗梦空间》</option>
            <option value="3">《电锯惊魂》</option>
            <option value="4">《死神来了》</option>
            <option value="5">《加勒比海盗》</option>
            <option value="6">《我是传奇》</option>
            <option value="7">《机械公敌》</option>
            <option value="8">《钢铁侠》</option>
            <option value="8">其他</option>
            </select>  
		</div>
	<!--Html-->
    </div>
    
    
    <div class="copy">2014 @ 后天堂工作室</div>
    
</body>
</html>
